<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.js"></script>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            border: 0;
            font: inherit;
            font-size: 100%;
            vertical-align: baseline;
        }

        body {
            margin: 0;
            padding: 0;
        }

        p {
            margin: 0;
        }

        a {
            text-decoration: none;
            color: black;
        }

        h2 {
            margin: 0;
            padding: 0;
            font-weight: 300;
        }

        ol, ul {
            list-style: none;
            margin: 0;
            padding-left: 0;
        }

        .pull-left {
            float: left;
        }

        .top {
            width: 100%;
            line-height: 30px;
            background: #eeeeee;
            font-size: 14px;
        }

        .top-list {
            width: 990px;
            height: 30px;
            margin: 0 auto;
        }

        .top-list .top-left {
            float: left;
        }

        .top-list .top-right {
            float: right;
            margin-right: 60px;
        }

        .top-list a {
            float: left;
            margin-left: 10px;
            color: #8d8d8d;
        }
        .shop-cart {
            width: 990px;
            margin: 40px auto;
        }

        .order-edit:before {
            content: "";
            display: block;
            background-image: url("images/buy-cart/logo.png");
            background-position: -234px -38px;
            background-size: 460px 217px;
            width: 150px;
            height: 42px;
        }

        .order-title {
            margin: 40px auto 50px;
        }

        .carnew-tip {
            height: auto;
            overflow: hidden;
            font-size: 12px;
            font-weight: 300;
            margin-bottom: 10px;
        }

        .carnew-tip .tipsbox {
            position: relative;
            float: left;
            width: 100%;
            height: 24px;
            line-height: 24px;
            padding: 4px 0;
            color: #818181;
            font-size: 14px;
            font-weight: 300;
            background-color: #f0f0f0;
        }

        .tipsbox > a {
            width: 13px;
            height: 13px;
            padding: 0;
            margin-right: 30px;
            margin-top: 5px;
            background-image: url("images/buy-cart/logo.png");
            background-position: -204px -159px;
            background-size: 460px 217px;
            float: right;
            cursor: pointer;
        }

        .tipsbox > strong {
            font-weight: 400;
            padding-left: 30px;
        }

        .order-pay {
            width: 100%;
            line-height: 150%;
        }

        .pay-wrapper .cart-title {
            padding: 0 30px;
            background: #444;
            height: 50px;
            overflow: hidden;
        }

        .shop-cart .cart-title {
            position: relative;
        }

        .cart-title > p {
            color: #fff;
        }

        .pay-wrapper .cart-title p {
            float: left;
            display: inline-block;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            font-weight: 300;
            color: #fff;
            vertical-align: middle;
            text-align: center;
        }

        .pay-wrapper .cart-title p.right {
            text-align: right;
        }

        .minus-plus {
            display: block;
            width: 25px;
            height: 25px;
            border: 1px solid #b0b0b0;
            text-align: center;
            cursor: pointer;
            background: #e0e0e0;
        }

        .minus-plus .minus, .minus-plus .plus {
            display: block;
            margin-top: 2px;
            margin-left: 2px;
            width: 20px;
            height: 20px;
        }

        .minus-plus .minus {
            background-image: url("images/pro-detail/minus.png");
        }

        .minus-plus .plus {
            background-image: url("images/pro-detail/plus.png");
        }

        .num {
            width: 50px;
            height: 25px;
            line-height: 27px;
            text-align: center;
            border: 1px solid #000;
            color: #000;
            font-size: 12px;
            margin-left: 5px;
            margin-right: 5px;
            background: #fff;
        }

        .promotion-pool {
            margin-top: 8px;

        }

        .shop-cart .cart-table {
            border: 1px solid #e0e0e0;
            height: 150px;
        }

        .shop-cart .cart-table:hover {
            background: #e0e0e0;
        }

        .shop-cart .order-pay .table {
            width: 100%;
        }

        .shop-cart .order-pay .table.table-group {
            position: relative;
            border-bottom-color: transparent;
        }

        .shop-cart .order-pay .table .tr.active {
            background-color: #f5f5f5;

        }

        .shop-cart .order-pay .table .tr {
            border-bottom: 1px solid #e0e0e0;
        }

        .shop-cart .order-pay .table > div {
            position: relative;
            padding: 0 30px 0 54px;
        }

        .shop-cart .order-pay .table.table-group > div:not(:last-child):before {
            position: absolute;
            top: 151px;
            left: 54px;
            content: "";
            display: inline-block;
            width: 904px;
            height: 1px;
            background-color: #e0e0e0;
        }

        .shop-cart .order-pay .table .tr .td {
            float: left;
            padding: 30px 0;
            font-size: 15px;
            font-weight: 300;
            text-align: center;
        }

        .shop-cart .pay-pro-icon {
            float: left;
            width: 66px;
            height: 90px;
            box-sizing: border-box;
            display: block;
            position: relative;
        }

        .shop-cart .order-pay .pay-pro-info {
            float: left;
            text-align: left;
            padding-left: 15px;
            padding-top: 0;
            margin-left: 0;
            width: 280px;
        }

        .shop-cart .order-pay .pay-pro-info a {
            display: block;
            width: 280px;
            min-height: 44px;
            padding-left: 3px;
            color: #444;
            font-size: 15px;
            font-weight: 700;
            line-height: 1.5;
            text-decoration: none;
            text-align: left;
            overflow: hidden;
        }

        .shop-cart .order-pay .pay-pro-info a:hover {
            color: #d0021b;
        }

        .shop-cart .order-pay .pay-pro-info .pay-pro-detail {
            margin-top: 0;
            display: inline-block;
            border: 1px dashed transparent;
            box-sizing: border-box;
            height: 26px;
            line-height: 26px;
            cursor: pointer;
        }

        .shop-cart .order-pay .pay-pro-info span {
            display: block;
            padding-left: 3px;
            font-size: 13px;
            font-weight: 300;
            color: #9a9a9a;
            text-align: left;
        }

        .shop-cart .order-pay .cart-operation .cart-col-btn, .shop-cart .order-pay .cart-operation .cart-del-btn {
            display: block;
            font-size: 12px;
            font-weight: 300;
            color: #000;
            text-align: right;
            cursor: pointer;
        }

        .shop-cart .order-pay .cart-operation .cart-col-btn:hover, .shop-cart .order-pay .cart-operation .cart-del-btn:hover {
            font-weight: 700;
            color: #d0021b;
        }

        .shop-cart .cart-fixed-submit {
            height: 50px;
            font-weight: 300;
            font-size: 14px;
            margin-top: 20px;
        }

        .shop-cart .cart-fixed-submit .cart-fixed-wrap {
            width: 100%;
            height: 50px;
            line-height: 50px;
            background-color: #e0e0e0;
        }

        .shop-cart .cart-fixed-submit .center-content {
            width: 990px;
            position: relative;
            padding-left: 50px;
            box-sizing: border-box;
        }

        .shop-cart .cart-fixed-submit .center-content > * {
            display: inline-block;
        }

        .shop-cart .cart-fixed-submit .fixed-option {
            margin-right: 210px;
        }

        .shop-cart .cart-item-check {
            position: absolute;
            left: 15px;
            width: 15px;
            height: 15px;
            color: #d9d9d9;
            float: left;
            margin-top: 0;
            margin-left: 15px;
            display: inline-block;
            cursor: pointer;
        }

        .shop-cart .red {
            color: #d0021b;
        }

        .shop-cart .cart-fixed-submit .fixed-option > a {
            color: #017cf8;
            margin-left: 20px;
        }

        .pay-pro-chose {
            float: left;
            width: 19px;
            height: 19px;
            margin-left: -36px;
            line-height: 92px;

        }

        .pay-pro-choseAll {
            float: left;
            width: 19px;
            height: 19px;
            margin-left: -28px;
            line-height: 60px;
        }

        .pay-pro-choseAll.Top {
            margin-left: -13px;
        }

        .pay-pro-chose img, .pay-pro-choseAll img {
            cursor: pointer;
        }

        .shop-cart .cart-fixed-submit .btn-account {
            width: 150px;
            height: 50px;
            padding: 0;
            text-align: center;
            border: 0;
            line-height: 50px;
            font-size: 20px;
            color: #fff;
            font-weight: 700;
            display: inline-block;
            background-color: #d0021b;
            cursor: pointer;
            float: right;
        }
    </style>
</head>
<body>
<div id="app-shoppingCart">
    <div class="top">
        <div class="top-list">
            <div class="top-left" v-show="!isLogin">
                <a href="#"><span>雷猴~</span></a>
                <a href="login.html"><span>[请登录]</span></a>
                <a href="register.html"><span>[注册]</span></a>
            </div>
            <div class="top-right">
                <a href="user-center.html" v-show="isLogin"><span>{{ nickname }}</span></a>
                <a href="javascript:void(0)"><span style="cursor: pointer" @click="quitLogin" v-show="isLogin">[退出]</span></a>
                <a href="user-collect.html"><span>我的收藏</span></a>
                <a href="index.html "><span>首页</span></a>
            </div>
        </div>
    </div>

    <div class="shop-cart">
        <!--头部-->
        <div class="order-edit">
            <div class="order-title"></div>
        </div>

        <!--提示-->
        <div class="carnew-tip">
            <div class="tipsbox" id="tipsbox">
                <a href="javascript:close()" class="btn-close" title="关闭"></a>
                <strong>温馨提示：</strong>
                1.选中的商品不保留保存，请及时结算。2.商品的价格、相关活动及库存以订单提交时为准。
            </div>
        </div>

        <!--选项-->
        <div class="order-pay">
            <div class="pay-wrapper">
                <!--标题-->
                <div class="cart-title">
                    <p class="left" style="width: 6%">
                    <span class="pay-pro-choseAll Top">
                        <img src="images/buy-cart/chooseAllTop.png" alt="">
                    </span>选中</p>
                    <p style="width: 35%">商品信息</p>
                    <p style="width: 14%">单价</p>
                    <p style="width: 15%">数量</p>
                    <p style="width: 16%">小计</p>
                    <p class="right" style="width: 11.8%">操作</p>
                </div>

                <!--购物车表格-->
                <div data-role="ordinary" v-show="showGoods">
                    <ul>
                        <li v-for="(value,index) in goods">
                            <div class="promotion-pool">
                                <div class="cart-table">
                                    <div class="table table-group">
                                        <div class="pre-sell-box tr active">
                                            <div class="pry-pro td" style="width: 368px;">
                                            <span class="pay-pro-chose">
                                                <img src="images/buy-cart/choose.png" alt="" @click="selectItem(index)" v-if="checkIfSelect(index)">
                                                <img src="images/buy-cart/not-choose.png" alt="" @click="selectItem(index)" v-else>
                                            </span>
                                                <a href="" class="pay-pro-icon" target="icon">
                                                    <img :src="value.image_main" width="66"/>
                                                </a>
                                                <p class="pay-pro-info">
                                                    <a  @click="onTapToGoodDetail(value.goods_ID)" target="_blank">{{ value.goods_name }}</a>
                                                    <em class="pay-pro-detail">
                                            <span>
                                                门店地址：<b>{{ value.store_name }}</b>
                                            </span>
                                                    </em>
                                                </p>
                                            </div>
                                            <div class="product-price td" style="width: 100px;margin-top: 18px">
                                                <p class="p-product-price">￥{{ value.price }}</p>
                                            </div>
                                            <div class="adjust-cart-num td"
                                                 style="width: 116px;padding-left: 37px;margin-top: 18px">
                                                <div class="num-wrapper">
                                                <span class="minus-plus pull-left">
                                                    <span class="minus" @click="reduceItem(index)"></span>
                                                </span>
                                                    <span class="num pull-left">{{ value.quantity }}</span>
                                                    <!--<input type="text" value="8" readonly="readonly">-->
                                                    <span class="minus-plus pull-left" >
                                                    <span class="plus" @click="addItem(index)"></span>
                                                </span>
                                                </div>
                                            </div>
                                            <div style="width: 160px;margin-top: 18px" class="sub-total red td">
                                                ￥{{ value.price*value.quantity }}
                                            </div>
                                            <div style="width: 100px;margin-top: 8px" class="cart-operation td">
                                                <span class="cart-del-btn" @click="removeGoods(index)">删除</span>
                                                <span class="cart-col-btn" @click="collectGoods(index)">收藏</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

                <!--总价计算-->
                <div class="cart-fixed-submit">
                    <div class="cart-fixed-wrap">
                        <div class="center-content">
                            <div class="fixed-option">
                                <!--<i class="cart-item-check iconfont" id="cbSelAllGoods"></i>-->
                                <span class="pay-pro-choseAll">
                                    <img src="images/buy-cart/chooseAll.png" alt="" @click="selectAll" v-if="isSelectAll">
                                    <img src="images/buy-cart/not-chooseAll.png" alt="" @click="selectAll" v-else>
                                </span>
                                <span class="check-all-sum">{{ selectMsg }}</span>
                                <div class="delAll delete-all-sel" style="display: inline;cursor: pointer" @click="deleteSelected">删除选中商品</div>
                                <div class="removeAll remove-all-2fav" style="display: inline;cursor: pointer" @click="collectSelected">移入收藏夹</div>
                            </div>
                            <p class="select-num">已选商品<strong class="ins red">{{ selected.length }}</strong>件</p>
                            <div class="price-sum" style="display: inline">
                                <p class="sum" style="display: inline">应付金额（不含邮费）：<strong class="red"><kbd>¥</kbd>{{ totalPrice }}</strong></p>
                            </div>
                            <a href="order.html" class="btn-account right" style="display: inline">去结算</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="./js/shoppingCart.js"></script>

</body>

</html>
